﻿
@{
    Layout = null;
    ViewData["Title"] = "JobCallSet";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />

<h1>职称设置JobCallSet</h1>
<div id="app">
    <el-row>
        <el-col :span="2"><el-button type="success" v-on:click="addkind">新增</el-button></el-col>
    </el-row>
    <el-table :data="tableData"
              style="width: 100%">
        <el-table-column prop="attribute_name"
                         label="职称名称"
                         width="160">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button size="mini"
                           v-on:click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           v-on:click="handleDelete(scope.row.pbc_id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    @*新增模态框*@
    <el-dialog title="新增职称"
               :visible.sync="AdialogVisible"
               width="55%">
        <el-form ref="form" :model="config_public_char" label-width="150px">
            <el-form-item label="职称名称">
                <el-input v-model="config_public_char.attribute_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="AdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitAdd">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    @*修改模态框*@
    <el-dialog title="修改职称"
               :visible.sync="UdialogVisible"
               width="55%">
        <el-form ref="form" :model="config_public_char" label-width="150px">
            <el-form-item label="职称名称">
                <el-input v-model="config_public_char.attribute_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="UdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitUdp">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //集合
            tableData: [],
            //实体类
            config_public_char: {
                pbc_id: '',
                attribute_kind: '',
                attribute_name: '',
            },
            //模态框开启标记
            AdialogVisible: false,
            UdialogVisible: false,
        },
        methods: {
            //刷新
            fill() {
                axios.get('/JobSet/JobSetFill').then((res) => {
                    this.tableData = res.data.tabs;
                });
            },
            //打开新增模态框
            addkind() {
                this.AdialogVisible = true;
                this.config_public_char = {};
            },
            //提交新增
            onSubmitAdd() {
                axios.post('/JobSet/JobSetAdd', {
                    attribute_name:this.config_public_char.attribute_name
                }).then(res => {
                    this.resultInform(res.data, "新增");
                    this.AdialogVisible = false;
                });
            },
            //修改编辑按钮，打开修改模态框
            handleEdit(row) {
                //文本框的赋值回显
                this.config_public_char = row;
                //下拉列表框值回显绑定
                this.config_public_char.attribute_kind = row.attribute_kind;
                this.config_public_char.attribute_name = row.attribute_name;
                this.UdialogVisible = true;
            },
            //提交修改
            onSubmitUdp() {
                axios.post('/JobSet/JobSetUpdate', {
                    pbc_id:this.config_public_char.pbc_id,
                    attribute_name:this.config_public_char.attribute_name
                }).then(res => {
                    this.resultInform(res.data, "修改");
                    this.UdialogVisible = false;
                })
            },
            //删除按钮
            handleDelete(id) {
                this.$confirm("确定要删除该职称信息吗？", "温馨提示").then(() => {
                    axios.delete('/JobSet/JobSetDelete?cpcid=' + id).then((res) => {
                        this.resultInform(res.data, "删除");
                    })
                }).catch((error) => {
                    console.info("取消删除！" + error);
                })
            },
            //结果通知方法
            resultInform(res, oper) {
                if (res > 0) {
                    this.openmessuc("职称" + oper + "成功！");
                    this.fill();
                } else {
                    this.openmeswar("职称" + oper + "有误！");
                }
            },
            //成功弹窗
            openmessuc: function(mes) {
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            //警告弹窗
            openmeswar: function(mes) {
                this.$message({
                    message: mes,
                    type: 'danger'
                });
            },
        },
        mounted: function() {
            this.fill();
        }
    });
</script>
